<template>
  <view class="item" >
    <navigator :url="'/pages/classlist/classlist?id='+item._id + '&name=' + item.name" class="box" v-if="!isMore">
      <image class="pic" :src="item.picurl" mode="aspectFill"></image>
      <view class="mask">{{item.name}}</view>
      <view class="tab">
        {{ formatUpdateTime(item.updateTime) ? `${formatUpdateTime(item.updateTime)}前更新` : '' }}
      </view>
    </navigator>
    <navigator open-type="switchTab" url="/pages/classify/classify" class="box more" v-else>
      <image class="pic" src="/common/images/more.jpg" mode="aspectFill"></image>
      <view class="mask">
        <uni-icons type="more-filled" size="34" color="#fff"></uni-icons>
        <view class="text">更多</view>
      </view>
    </navigator>
  </view>
</template>

<script setup>
import { formatUpdateTime } from "@/utils/common.js"

defineProps({
  isMore:{
    type:Boolean,
    default:false,
  },
  item:{
    type:Object,
    default:()=>{}
  }
})
// console.log(item);


</script>

<style lang="scss" scoped >
.item {
  .box {
    height: 340rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    .pic {
      width: 100%;
      height: 100%;
    }
    .mask {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70rpx;
      font-size: 30rpx;
      background-color: rgba(0, 0, 0, .2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(20rpx);
      font-weight: 600;
    }
    .tab {
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(255, 129, 90, .7);
      backdrop-filter: blur(20rpx);
      color: #fff;
      font-size: 22rpx;
      padding: 6rpx 14rpx;
      border-radius: 0 0 20rpx 0;
      transform: scale(0.8);
      transform-origin: left top;
    }
  }
  .box.more {
    .mask {
      width: 100%;
      height: 100%;
      flex-direction: column;
    }
    .text {
      font-size: 28rpx;
    }
  }
}
</style>